<template>

  <div>
    <el-config-provider :locale="zhCn"> <!--《:locale="zhCn 》设置语言-->
      <el-row :gutter="20">
        <el-col :span="2">
          <div class="grid-content ep-bg-purple"><el-button type="primary" plain size="default" @click="add"><el-icon>
                <Plus />
              </el-icon> 添加</el-button>
          </div>
        </el-col>


        <el-col :span="2">
          <div class="grid-content ep-bg-purple"><el-select placeholder="导出" style="width: 100px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>


        <el-col :span="2">
          <div class="grid-content ep-bg-purple"> <el-select placeholder="删除" style="width: 100px">
              <el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value"
                @click="open">
              </el-option>
            </el-select>
          </div>
        </el-col>


        <el-col :span="11">
          <div class="grid-content ep-bg-purple"> <el-select placeholder="操作记录" style="width: 100px">
              <el-option v-for="item in optionsss" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>



        <el-col :span="3">
          <div class="grid-content ep-bg-purple-light"> <el-input v-model="searchKeyword" style="width: 160px" size="default"
              placeholder="搜索數據">
              <template #prefix><el-icon class="el-input__icon">
                  <search />
                </el-icon></template></el-input>
          </div>
        </el-col>

        <el-col :span="1">
          <div class="grid-content ep-bg-purple-light">
            <a-tooltip content="筛选" position="bottom" background-color="rgb(52, 145, 250)" mini>
              <el-button size="default" @click="dialog = true"><el-icon>
                  <Filter />
                </el-icon></el-button>
            </a-tooltip>
          </div>
        </el-col>

        <el-col :span="1">
          <div class="grid-content ep-bg-purple-light"> <a-tooltip content="排序" position="bottom"
              background-color="rgb(52, 145, 250)" mini>
              <el-button size="default" @click=""><el-icon>
                  <Sort />
                </el-icon></el-button>
            </a-tooltip>
          </div>
        </el-col>


        <el-col :span="2">
          <div class="grid-content ep-bg-purple-light"><a-tooltip content="刷新" position="bottom"
              background-color="rgb(52, 145, 250)" mini>
              <el-button size="default" @click=""><el-icon>
                  <Refresh />
                </el-icon></el-button>
            </a-tooltip>
          </div>
        </el-col>
      </el-row>

      <el-table :data="filteredData"  @cell-dblclick="handleCellDblClick" style="height: 800px;min-width: 1300px;"
        :default-sort="{ prop: 'SubmissionTime', order: 'descending' }">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="60" />
        
        <el-table-column prop="Position" label="职位名称"  width="200" align="center">
         <template #default="scope">
            <span style="color: rgb(102, 177, 255);">{{ scope.row.Position }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="TheDepartmentIAmIn" label="部门"  width="200" align="center"/>
        <el-table-column prop="NumberOfPeople" label="人数" sortable width="200" align="center"/>
        <el-table-column prop="JobResponsibilities" label="岗位职责"  width="200" align="center"/>
        <el-table-column prop="JobRequirements" label="岗位要求"  width="200" align="center"/>
        <el-table-column prop="Submitter" label="提交人" width="200" align="center">
          <template #default="scope">
            <span style="color: rgb(102, 177, 255);">{{ scope.row.Submitter }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="SubmissionTime" label="提交日期" sortable width="200" align="center"/>
        <el-table-column prop="UpdateTime" label="修改时间" sortable width="200" align="center"/>
        
      </el-table>
      <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]" :disabled="disabled" :background="background"
        layout="total, sizes, prev, pager, next, jumper" :total="400">
      </el-pagination>
    </el-config-provider>
  </div>
  <el-dialog title="添加信息" v-model="isVisible" width="60%" destroy-on-close>
    <hr />
    <Insert v-if="isVisible"></Insert>
  </el-dialog>
  <!-- 信息编辑介面 -->
  <el-dialog title="岗位" width="70%" destroy-on-close v-model="isVisibleEdit">
    <hr />
    <update @ref-table="refTable"></update>
  </el-dialog>

  <!--筛选  -->
  <el-drawer v-model="dialog" title="筛选"  direction="rtl" class="demo-drawer">
    <div class="demo-drawer__content">
      <el-form :model="form" style="height: 600px;">
        <el-select v-model="FilterTheDropDownBox" value-key="">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>

      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="cancelForm">取消</el-button>
        <el-button type="primary" :loading="loading" @click="onClick">
          {{ loading ? '提交中 ...' : '提交' }}
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import router from '@/router'
import { ref, reactive, computed } from 'vue'
import Insert from './insert.vue'
import update from './update.vue'
import ComponentSize from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const searchKeyword = ref('') // 搜索关键词


const data = ref([
  { id: 1, Position: '品牌运营', TheDepartmentIAmIn: "运营", JobResponsibilities: "全媒体广告审核业务", NumberOfPeople: "1", JobRequirements: "1.30岁以下，大学本科及以上学历。", Submitter: "爱丽丝", SubmissionTime: "2023-01-30 11:24:09", UpdateTime: "2023-08-30 11:24:09" },
  { id: 2, Position: '开发部门', TheDepartmentIAmIn: "开发", JobResponsibilities: "全媒体广告审核业务", NumberOfPeople: "2", JobRequirements: "1.30岁以下，大学本科及以上学历。", Submitter: "爱丽丝", SubmissionTime: "2023-03-30 11:24:09", UpdateTime: "2023-08-30 11:24:09" },
  { id: 3, Position: '测试部门', TheDepartmentIAmIn: "测试", JobResponsibilities: "全媒体广告审核业务", NumberOfPeople: "3", JobRequirements: "1.30岁以下，大学本科及以上学历。", Submitter: "爱丽丝", SubmissionTime: "2023-03-20 11:24:09", UpdateTime: "2023-08-30 11:24:09" },
  { id: 4, Position: '人事部门', TheDepartmentIAmIn: "人事", JobResponsibilities: "全媒体广告审核业务", NumberOfPeople: "4", JobRequirements: "1.30岁以下，大学本科及以上学历。", Submitter: "爱丽丝", SubmissionTime: "2023-09-30 11:24:09", UpdateTime: "2023-08-30 11:24:09" },
  { id: 5, Position: '后端开发', TheDepartmentIAmIn: "后端开发", JobResponsibilities: "全媒体广告审核业务", NumberOfPeople: "5", JobRequirements: "1.30岁以下，大学本科及以上学历。", Submitter: "爱丽丝", SubmissionTime: "2023-11-30 11:24:09", UpdateTime: "2023-08-30 11:24:09" },
  { id: 6, Position: '前端开发', TheDepartmentIAmIn: "前端开发", JobResponsibilities: "全媒体广告审核业务", NumberOfPeople: "7", JobRequirements: "1.30岁以下，大学本科及以上学历。", Submitter: "爱丽丝", SubmissionTime: "2023-06-30 11:24:09", UpdateTime: "2023-08-30 11:24:09" },

])
const columns = ref([
  { id: 'Position', label: '职位名称', width: '160' },
  { id: 'TheDepartmentIAmIn', label: '部门', width: '120' },
  { id: 'NumberOfPeople', label: '人数', width: '120' },
  { id: 'JobResponsibilities', label: '职位职责', width: '200' },
  { id: 'JobRequirements', label: '职位要求', width: '200' },
  { id: 'Submitter', label: '提交人', width: '120' },
  { id: 'SubmissionTime', label: '提交时间', width: '200' },
  { id: 'UpdateTime', label: '更新时间', width: '200' },

])

// 根据搜索关键词过滤数据
const filteredData = computed(() => {
  if (!searchKeyword.value) {
    return data.value
  }
    // 筛选出包含搜索关键词的项
  const keyword = searchKeyword.value.toLowerCase()
//   会遍历data.value数组中的每一个元素。
  return data.value.filter(item => {
    return (
      (item.Position && item.Position.toLowerCase().includes(keyword)) ||
      (item.TheDepartmentIAmIn && item.TheDepartmentIAmIn.toLowerCase().includes(keyword)) ||
      (item.NumberOfPeople && item.NumberOfPeople.toLowerCase().includes(keyword)) ||
      (item.JobResponsibilities && item.JobResponsibilities.toLowerCase().includes(keyword)) ||
      (item.JobRequirements && item.JobRequirements.toLowerCase().includes(keyword)) ||
      (item.Submitter && item.Submitter.toLowerCase().includes(keyword))
    )
  })
})

// 隐藏
const isVisible = ref(false)
//添加
const add = () => {
  isVisible.value = true
  router.push('/recruitment/insert')
}
//导出下拉框
const options = ref([
  { label: '全部', value: '' },
  { label: '待处理', value: '待处理' },
  { label: '处理中', value: '处理中' },
  { label: '处理完成', value: '处理完成' },
  { label: '处理失败', value: '处理失败' },
])
//删除下拉框
const optionss = ref([
  { label: '全部', value: '' },
  { label: '待处理', value: '待处理' },
  { label: '处理中', value: '处理中' },
  { label: '处理完成', value: '处理完成' },
  { label: '处理失败', value: '处理失败' },
])
// 筛选下拉框
const FilterTheDropDownBox = ref([
  { label: '全部', value: '' },
  { label: '待处理', value: '待处理' },
  { label: '处理中', value: '处理中' },
  { label: '处理完成', value: '处理完成' },
  { label: '处理失败', value: '处理失败' },
])

//删除操作
const open = () => {
  ElMessageBox.confirm(
    '你确定要删除吗?',
    '通知',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'warning',
        message: '取消操作',
      })
    })
}

//操作记录下拉框
const optionsss = ref([
  { label: '全部', value: '' },
  { label: '待处理', value: '待处理' },
  { label: '处理中', value: '处理中' },
  { label: '处理完成', value: '处理完成' },
  { label: '处理失败', value: '处理失败' },
])
const dialog = ref(false); //抽屉
const loading = ref(false) //加载
const isVisibleEdit = ref(false)  //信息修改界面
// 
const currentPage4 = ref(1)//默认当前页
const pageSize4 = ref(100)
const size = ref < ComponentSize > ('default')
const background = ref(false) //背景
const disabled = ref(false) //禁用

const onClick = () => {//提交
  loading.value = true
  setTimeout(() => {
    loading.value = false
    dialog.value = false
  }, 400)
}


//取消
const cancelForm = () => {
  loading.value = false
  dialog.value = false
  clearTimeout(timer)
}

//信息修改界面
// 双击修改
const handleCellDblClick = (row, column, cell, event) => {
  isVisibleEdit.value = true;
}

const refTable = () => {
  isVisibleEdit.value = false;
}
import { useRouter } from 'vue-router'
console.log(useRouter().getRoutes());

</script>

<style scoped></style>